<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* .father {
      height: 400px;
      width: 100%;
      display: flex;
    }

    .left {
      width: 200px;
      height: 400px;
      background-color: red;
    }

    .center {
      flex: 1;
      background-color: hotpink;

    }

    .right {
      width: 200px;
      height: 400px;
      background-color: red;

    } */

    .left {
      margin-left: -100%;
    }

    .right {
      margin-left: -100px;
    }

    .main #main-wrapper {
      padding-left: 100px;
      padding-right: 100px;
    }
  </style>
</head>

<div class="header">header</div>
<div class="main middle">
  <div id="main-wrapper">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="footer">footer</div>


<body>
  <script>
    // let arr = [2, 22223, 23, 1, 232323, 22]

    // let dom = document.querySelector(".footer")
    // dom.onclick = jieliu(demo, 1000, true)

    // function demo() {
    //   console.log(1111)
    // }


    // function fangdou(fn, wait, immediate) {
    //   let timeout;
    //   return function () {
    //     if (timeout) clearTimeout(timeout)
    //     if (immediate) {
    //       // 立即
    //       if (!timeout) fn.apply(this, arguments)
    //       timeout = setTimeout(function () {
    //         timeout = null
    //       }, wait)

    //     } else {
    //       // 非立即
    //       timeout = setTimeout(function () {
    //         fn.apply(this, arguments);
    //       }, wait)
    //     }
    //   }
    // }

    // function jieliu(fn, wait, imm) {
    //   let tiemr
    //   return function () {
    //     if (!tiemr) {
    //       if (imm) {
    //         // 立即执行
    //         fn.apply(this, arguments)
    //         tiemr = setTimeout(function () {
    //           tiemr = null
    //         }, wait)
    //       } else {
    //         // 非立即执行
    //         tiemr = setTimeout(function () {
    //           fn.apply(this, arguments)
    //           tiemr = null
    //         }, wait)
    //       }
    //     }
    //   }
    // }


    // const arr = [1, 2, 3]
    // arr.reduce((p, x) => {
    //   console.log(p, 1111111111111111, x);
    //   return p.then(() => {
    //     return new Promise(resolve => {
    //       setTimeout(() => resolve(console.log(x)), 1000)
    //     })
    //   })
    // }, Promise.resolve())


    // let arr = [1, 2, 3]
    // arr.reduce((p, n) => {
    //   return p.then(() => {
    //     return new Promise(resolve => {
    //       setTimeout(() => resolve(console.log(n)), 1000)
    //     })
    //   })
    //   console.log(p, n);
    // }, Promise.resolve(1))








    // Promise.resolve()
    //   .then(() => {
    //     return new Promise(r => {
    //       setTimeout(() => {
    //         r(console.log(1))
    //       }, 1000)
    //     })
    //   })
    //   .then(r => {
    //     return new Promise(r => {
    //       setTimeout(() => {
    //         r(console.log(2))
    //       }, 1000)
    //     })
    //   })
    //   .then(r => {
    //     return new Promise(r => {
    //       setTimeout(() => {
    //         r(console.log(3))
    //       }, 1000)
    //     })
    //   })

    // function red() {
    //   console.log("red");
    // }
    // function green() {
    //   console.log("green");
    // }
    // function yellow() {
    //   console.log("yellow");
    // }

    // function test(fn, timeout) {
    //   return new Promise(r => {
    //     setTimeout(() => {
    //       fn()
    //       r()
    //     }, timeout);
    //   })
    // }

    // function step() {
    //   Promise.resolve().then(
    //     () => {
    //       return test(red, 2000)
    //     }
    //   ).then(
    //     () => {
    //       return test(green, 2000)
    //     }
    //   ).then(
    //     () => {
    //       return test(yellow, 2000)
    //     }
    //   ).then(() => {
    //     return step()
    //   })
    // }

    // step()




    // function light(timer, cb) {
    //   return new Promise(resolve => {
    //     setTimeout(() => {
    //       cb()
    //       resolve()
    //     }, timer)
    //   })
    // }
    // const step = function () {
    //   Promise.resolve().then(() => {
    //     return light(3000, red)
    //   }).then(() => {
    //     return light(2000, green)
    //   }).then(() => {
    //     return light(1000, yellow)
    //   }).then(() => {
    //     return step()
    //   })
    // }

    // step();

    // function maopao(arr) {
    //   let temp;
    //   for (let i = 0; i < arr.length; i++) {
    //     for (let j = 0; j < arr.length - 1 - i; j++) {
    //       if (arr[j] > arr[j + 1]) {
    //         temp = arr[j]
    //         arr[j] = arr[j + 1]
    //         arr[j + 1] = temp
    //       }
    //     }
    //   }
    //   return arr
    // }


    // function kuaiPai(arr) {
    //   console.log(arr);
    //   if (arr.length <= 1) {
    //     return arr
    //   }

    //   let value = arr.splice(Math.floor(arr.length / 2), 1)[0]
    //   let left = []
    //   let right = []
    //   arr.forEach(item => {
    //     if (item < value) {
    //       left.push(item)
    //     } else {
    //       right.push(item)
    //     }
    //   })

    //   return kuaiPai(left).concat(value, kuaiPai(right))

    // }
    // console.log(kuaiPai(arr));


    // let arr = [1, 2, 3, 4]

    // function demo(num, timer) {
    //   return new Promise((resolve) => {
    //     setTimeout(() => {
    //       resolve(num)
    //       console.log(num);
    //     }, timer)
    //   })
    // }

    // let arr1 = arr.map((item, idx) => {
    //   return demo(item, (idx + 1) * 1000)
    // })

    // Promise.all(arr1).then(res => {
    //   console.log(res);
    // })
    // Promise.resolve().then(() => {
    //   return demo(1, 2000)
    // }).then(()=>{
    //   return demo(1, 5000)
    // })


    // 红绿灯
    // function New(fn, ...args) {
    //   let obj = Object.create(fn.prototype);
    //   let result = fn.apply(obj, args);
    //   if (typeof result === "object") {
    //     return result
    //   } else {
    //     return obj
    //   }
    // }
    // function demo() {
    //   console.log('demo');
    // }
    // let aa = New(demo)
    // console.log(aa, 111);


    // function instaceof1(left, right) {
    //   left = left.__proto__
    //   right = right.prototype
    //   while (true) {
    //     if (left == null) return false
    //     if (left == right) return true
    //     left = left.__proto__
    //   }
    // }
    // console.log(instaceof1({}, Array));
    // console.log({} instanceof Array);

    // let dom = document.querySelector(".footer")
    // dom.onclick = jieliu(demo, 1000, true)

    // function demo() {
    //   console.log(1111)
    // }


    // let arr = [
    //   { id: 1, name: '部门1', pid: 0 },
    //   { id: 2, name: '部门2', pid: 1 },
    //   { id: 3, name: '部门3', pid: 1 },
    //   { id: 4, name: '部门4', pid: 3 },
    //   { id: 5, name: '部门5', pid: 4 },
    // ]

    // function nest(pid, arr) {
    //   return arr.filter(item => item.pid == pid).map(item => ({ ...item, chidren: nest(item.id, arr) }))
    // }
    // console.log(nest(0, arr));

    // let arr = [[1, 2, 3], [3, 23, 23,], [2323, 23, [23, 232323, 2323232323, [1, 2, [1, 2, 23, [1, 2, 23]], 3]]]]

    // console.log([...new Set(arr.flat(10))].sort((a, b) => a - b));


    // const promise1 = new Promise((resolve, reject) => {
    //   console.log('promise1')
    // })
    // console.log('1', promise1);


    // const promise = new Promise((resolve, reject) => {
    //   console.log(1);
    //   resolve('success')
    //   console.log(2);
    // });
    // promise.then(() => {
    //   console.log(3);
    // });
    // console.log(4);


    // const promise = new Promise((resolve, reject) => {
    //   console.log(1);
    //   console.log(2);
    // });
    // promise.then(() => {
    //   console.log(3);
    // });
    // console.log(4);

    // const promise1 = new Promise((resolve, reject) => {
    //   console.log('promise1')
    //   resolve('resolve1')
    // })
    // const promise2 = promise1.then(res => {
    //   console.log(res)
    // })
    // console.log('1', promise1); // promise fulfilled <resolve1>
    // console.log('2', promise2); // promise pedding


    // const fn = () => (new Promise((resolve, reject) => {
    //   console.log(1);
    //   resolve('success')
    // }))
    // fn().then(res => {
    //   console.log(res)
    // })
    // console.log('start')

    // const fn = () =>
    //   new Promise((resolve, reject) => {
    //     console.log(1);
    //     resolve("success");
    //   });
    // console.log("start");
    // fn().then(res => {
    //   console.log(res);
    // });



    // console.log('start')
    // setTimeout(() => {
    //   console.log('time')
    // })
    // Promise.resolve().then(() => {
    //   console.log('resolve')
    // })
    // console.log('end')

    // start end resolve time


    // const promise = new Promise((resolve, reject) => {
    //   console.log(1);
    //   setTimeout(() => {
    //     console.log("timerStart");
    //     resolve("success");
    //     console.log("timerEnd");
    //   }, 0);
    //   console.log(2);
    // });
    // promise.then((res) => {
    //   console.log(res);
    // });
    // console.log(4);

    // 1 2 4

    // setTimeout(() => {
    //   console.log('timer1');
    //   setTimeout(() => {
    //     console.log('timer3')
    //   }, 0)
    // }, 0)
    // setTimeout(() => {
    //   console.log('timer2')
    // }, 0)
    // console.log('start')


    // Promise.resolve().then(() => {
    //   console.log('promise1');
    //   const timer2 = setTimeout(() => {
    //     console.log('timer2')
    //   }, 0)
    // });
    // const timer1 = setTimeout(() => {
    //   console.log('timer1')
    //   Promise.resolve().then(() => {
    //     console.log('promise2')
    //   })
    // }, 0)
    // console.log('start');

    // start promise1  timer1 promise2 timer2



    // const async1 = async () => {
    //   console.log('async1'); //2
    //   setTimeout(() => {
    //     console.log('timer1') // 8 最后执行
    //   }, 2000)
    //   await new Promise(resolve => {
    //     console.log('promise1')  //3
    //   })
    //   console.log('async1 end') //4
    //   return 'async1 success'
    // }
    // console.log('script start'); //1
    // async1().then(res => console.log(res)); //5  async1 success
    // console.log('script end'); //4
    // Promise.resolve(1)
    //   .then(2)
    //   .then(Promise.resolve(3))
    //   .catch(4)
    //   .then(res => console.log(res)) // 6  1
    // setTimeout(() => {
    //   console.log('timer2') //7
    // }, 1000)




    // function p1(num, timer) {
    //   return new Promise(resolve => {
    //     setTimeout(() => {
    //       resolve(num)
    //     }, timer)
    //   })
    // }


    // let arr = [1, 2, 3]


    // function aa() {
    //   p1('红灯', 1000).then(res => {
    //     console.log(res);
    //     return p1('绿灯', 3000)
    //   }).then(res => {
    //     console.log(res);
    //     return p1('黄灯', 2000)
    //   }).then(res => {
    //     console.log(res);
    //   }).then(res => {
    //     return aa()
    //   })
    // }

    // aa()


    // let str = 'aaannnsdjjjjsdkwkkweekweasdvxczxnvbmckkkkkpkkkkkkkkkkkkweweweasdsdasdasd'


    /** * @param {string} s * @return {number} */

    // var lengthOfLongestSubstring = function (s) {
    //   let obj = {}
    //   s.split("").forEach(item => {
    //     obj[item] = 0
    //   })
    //   Object.keys(obj).forEach(key => {
    //     str.split("").forEach(item => {
    //       if (item == key) {
    //         obj[key]++
    //       }
    //     })
    //   })
    //   return obj
    // };

    // console.log(lengthOfLongestSubstring(str));

    // 内部函数有外部的引用

    // 防抖节流   柯里化

    // let dom = document.querySelector(".header")

    // function demo() {
    //   console.log("111");
    // }
    // dom.onclick = jieLiu(demo, 1000, false)

    // function fangdou(fn, time, imm) {
    //   let time1
    //   return function () {
    //     if (time1) clearTimeout(time1)
    //     if (imm) {
    //       // 立即触发
    //       if (!time1) fn()
    //       time1 = setTimeout(() => {
    //         time1 = null
    //       }, time)
    //     } else {
    //       //待会触发
    //       time1 = setTimeout(() => {
    //         fn()
    //       }, time)
    //     }
    //   }
    // }


    // function jieLiu(fn, time, imm) {
    //   let time1
    //   return function () {
    //     if (!time1) {
    //       if (imm) {
    //         // 立即触发
    //         fn()
    //         time1 = setTimeout(() => {
    //           time1 = null
    //         }, time)
    //       } else {
    //         // 非立即触发
    //         time1 = setTimeout(() => {
    //           fn()
    //           time1 = null
    //         }, time)
    //       }

    //     }
    //   }
    // }



    // 柯里化
    // let demo = curry((a, b, c, d) => {
    //   return a * b * c * d
    // })
    // function curry(fn, arr = []) {
    //   let length1 = fn.length
    //   return function (...args) {
    //     arr = [...args, ...arr]

    //     if (length1 === arr.length) {
    //       return fn.apply(this, arr)
    //     } else {
    //       return curry(fn, arr)
    //     }
    //   }
    // }
    // // console.log(demo(1, 2, 3, 4));
    // // console.log(demo(1, 2)(3)(4))
    // // console.log(demo(1, 2, 3)(4))
    // console.log(demo(1)(2)(3)(4))


    // 数组 对象的扁平化处理


    // let arr = [1, 2, [23, [2323, 23, 23, [23]]], [123], 23]
    // function bianpinghua(arr, arr1 = []) {
    //   arr.forEach(item => {
    //     if (typeof item == 'object') {
    //       bianpinghua(item, arr1)
    //     } else {
    //       arr1.push(item)
    //     }
    //   })
    //   return arr1
    // }
    // console.log(bianpinghua(arr));


    // 对象

    // let obj = {
    //   a: {
    //     b: {
    //       c: {
    //         d: 12,
    //         e: 2222
    //       }
    //     }
    //   },

    // }

    // 成果  a.b.c.d:12  a.b.c.e:"213"


    // function objB(obj) {
    //   let obj1 = {}
    //   function demo(obj, keys = "") {
    //     Object.keys(obj).forEach(key => {
    //       keys = keys ? keys.concat(key) : key
    //       if (typeof obj[key] == 'object') {
    //         demo(obj[key], keys)
    //       } else {
    //         obj1[keys] = obj[key]
    //       }
    //     })
    //   }
    //   demo(obj)
    //   return obj1
    // }
    // console.log(objB(obj));



    // function deepClone(obj = {}, map = new WeakMap()) {
    //   if (typeof obj !== "object") {
    //     return obj;
    //   }
    //   if (map.get(obj)) {
    //     console.log(map);
    //     return map.get(obj);
    //   }

    //   let result = {};
    //   // 初始化返回结果
    //   if (
    //     obj instanceof Array ||
    //     // 加 || 的原因是为了防止 Array 的 prototype 被重写，Array.isArray 也是如此
    //     Object.prototype.toString(obj) === "[object Array]"
    //   ) {
    //     result = [];
    //   }
    //   // 防止循环引用
    //   map.set(obj, result);

    //   for (const key in obj) {
    //     // 保证 key 不是原型属性
    //     if (obj.hasOwnProperty(key)) {
    //       // 递归调用
    //       result[key] = deepClone(obj[key], map);
    //     }
    //   }

    //   // 返回结果
    //   return result;
    // }

    // let b = { name: "1", age: 2 }
    // b.age = b
    // let bb = deepClone(b)
    // bb.name = "11111"
    // console.log(b);
    // console.log(bb);

    // 例如将 input 转成output的形式
    // let input =
    //   [
    //     { id: 1, val: '学校', parentId: null },
    //     { id: 2, val: '班级1', parentId: 1 },
    //     {
    //       id: 3,
    //       val: '班级2', parentId: 1
    //     },
    //     {
    //       id: 4, val: '学生1',
    //       parentId: 2
    //     },
    //     { id: 5, val: '学生2', parentId: 2 },
    //     { id: 6, val: '学生3', parentId: 3 },
    //   ]

    // function digui(input, m1 = null) {

    //   return input.filter(item => {
    //     if (item.parentId == m1) {
    //       return item
    //     }
    //   }).map(item => {
    //     return ({ ...item, children: digui(input, item.id) })
    //   })
    // }

    // console.log(digui(input, null));



    // function childNum(num = 30, count = 3) {
    //   let arr = []
    //   for (let i = 0; i < num; i++) {
    //     arr.push(i + 1)
    //   }

    //   let start = 0
    //   let idx = 0
    //   let start = 0
    //   while () {

    //   }
    // }
    // console.log(childNum());



    // function childNum(num, count) {
    //   let allplayer = [];
    //   for (let i = 0; i < num; i++) {
    //     allplayer[i] = i + 1;
    //   }

    //   let exitCount = 0;    // 离开人数
    //   let curIndex = 0;     // 当前下标

    //   while (exitCount < num - 1) {
    //     if (allplayer[curIndex] !== 0) curIndex++
    //     if (curIndex == count) {
    //       allplayer[curIndex] = 0
    //       exitCount++
    //       curIndex = 0
    //     }
    //   }
    //   for (i = 0; i < num; i++) {
    //     if (allplayer[i] !== 0) {
    //       return allplayer[i]
    //     }
    //   }
    // }
    // console.log(childNum(30, 3));


    // function childNum(num, count) {
    //   let allplayer = [];
    //   for (let i = 0; i < num; i++) {
    //     allplayer[i] = i + 1;
    //   }
    //   let a1 = 0
    //   let a2 = 0
    //   let a3 = 0

    // while (a1 < num - 1) {
    //   if (allplayer[a2] !== 0) a3++
    //   if (a3 == count) {
    //     a3 = 0
    //     allplayer[a2] = 0
    //     a1++
    //   }
    //   a2++
    //   if (a2 == 30) {
    //     a2 = 0
    //   }
    // }


    //   return allplayer.filter(item => {
    //     return item
    //   })[0]
    // }
    // console.log(childNum(30, 3));


    // let arr = [1, 2, 3, 4, 5, 6]
    // let yu = 2 % 6
    // let arr1 = arr.splice(6 - 2, yu)
    // console.log(arr, arr1);
    // let newarr = []
    // newarr = [...arr1, ...arr]
    // console.log(newarr);


    // const a = [1, 2]
    // Object.freeze(a)
    // console.log(a);


    // let arr = [1, 2, 3]
    // console.log(arr.map(item => {
    //   return item * 2
    // }));
    // console.log(arr);
    // const arr = [
    //   { id: 1, name: "部门A", parentId: 0 }, // 0 代表顶级节点，无父节点
    //   { id: 2, name: "部门B", parentId: 1 },
    //   { id: 3, name: "部门C", parentId: 1 },
    //   { id: 4, name: "部门D", parentId: 2 },
    //   { id: 5, name: "部门E", parentId: 2 },
    //   { id: 6, name: "部门F", parentId: 3 },
    // ];

    // function change (parentId, arr) {
    //   return arr
    //     .filter(item => item.parentId == parentId)
    //     .map(item => ({ ...item, chidren: change(item.id, arr) }));
    // }
    // console.dir(change("", arr));


    // let arr = [
    //   {
    //     id: 1,
    //     text: '节点1',
    //     parentId: 0,
    //     children: [
    //       {
    //         id: 2,
    //         text: '节点1_1',
    //         parentId: 1,
    //         children: [
    //           {
    //             id: 3,
    //             text: '节点1_2',
    //             parentId: 2
    //           }
    //         ]
    //       }
    //     ]
    //   },
    //   {
    //     id: 2,
    //     text: '节点2',
    //     parentId: 0,
    //   }
    // ]

    // function demo (arr) {
    //   let arrAll = []
    //   function demo1 (arr1) {
    //     arr1.forEach(item => {
    //       if (item.children) {
    //         demo1(item.children)
    //         delete item.children
    //         arrAll.push(item)
    //       } else {
    //         arrAll.push(item)
    //       }
    //     })
    //   }
    //   demo1(arr)
    //   return arrAll
    // }

    // console.log(demo(arr));
    // let a = {}, b = '123', c = 123
    // a[b] = 'b'
    // a[c] = 'c'
    // console.log(a[b])

    // 自己模拟下实现过程
    function Parent4 () {
      this.name = 'parent4';
      this.play = [1, 2, 3];
    }
    function Child4 () {
      Parent4.call(this);
      this.type = 'child4';
    }
    Child4.prototype = new Parent4();
    Child4.prototype.constructor = Child4;
    var s3 = new Child4();
    var s4 = new Child4();
    s3.play.push(4);
    console.dir(Child4);
    console.log(s3.play, s4.play);



  </script>
</body>

</html>